<template>
    <div class="container">
        <div :class="['left', { collapsed: isCollapse }]">

            <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse" :collapse-transition="false" @select="handleSelect">
                <el-menu-item v-for="item in devices" :index="item.addr">
                    <i class="iconfont icon-dianji"></i>
                    &nbsp;
                    <span slot="title">{{ item.addr }}</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="right">
            <div class="top">
                <Comtop :statistical_data="statistical_data" ref="comtop" />
            </div>
            <div class="bottom">
                <Combottom :cycle_time="cycle_time" :blockage_point="blockage_point" ref="combottom" :activeIndex="activeIndex" />
            </div>
        </div>
    </div>
</template>

<script>
import { requestApi } from '@/requset/api'
import Comtop from './Comtop.vue'
import Combottom from './Combottom.vue'
export default {
    data() {
        return {
            isCollapse: false,
            activeIndex: null,
            devices: [],
            timer: null,
            timeout: 5000,
            blockage_point: null,
            cycle_time: null,
            statistical_data: null,
        }
    },
    components: {
        Comtop,
        Combottom,
    },
    methods: {
        change(i) {
            this.active = i
        },
        getDevices() {
            return requestApi('post', 'device/getoil/device', { page: 1, size: 1 }).then((res) => {
                this.devices = res.data.data
                if (!this.activeIndex) {
                    this.$set(this, 'activeIndex', this.devices[0].addr)
                    this.$refs.combottom.getData(this.devices[0].addr)
                }
            })
        },
        handleSelect(key, keyPath) {
            this.$refs.combottom.getData(key)
        },
        getDatareal() {
            return requestApi('post', 'device/getoil', { key: this.activeIndex }).then((res) => {
                if (res.data.code == 0) {
                    let { blockage_point, cycle_time, statistical_data } = res.data.data
                    this.blockage_point = blockage_point
                    this.cycle_time = cycle_time
                    this.$set(this, 'statistical_data', statistical_data)
                    this.statistical_data = statistical_data
                    this.$refs.comtop.drawChart(statistical_data)
                }
            })
        },
    },
    created() {
        this.getDevices().then(() => {
            this.getDatareal()
            this.timer = setInterval(() => {
                this.getDatareal()
            }, this.timeout)
        })
    },
    beforeDestroy() {
        clearInterval(this.timer) // 在组件销毁前清除定时器
    },
}
</script>

<style lang="less" scoped>
.container {
    // width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;

    .left {
        height: 100%;
        transition: width 0.15s;
        -webkit-transition: width 0.15s;
        -moz-transition: width 0.15s;
        -webkit-transition: width 0.15s;
        -o-transition: width 0.15s;
        background-image: url(@/assets/DeviceDia/tree_left_bg.png);
        background-size: 100% 120%;
        background-position: 100%;
        .el-menu-item{
            width: 120px;
        }
        .isCollapse {
            height: 40px;
            background-color: #007bff;
            line-height: 40px;
            width: 65px;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }
        i {
            font-size: 22px;
            color: aqua;
        }
    }


    .left:not(.collapsed) {
        width: 140px; /* 当展开时的宽度 */
    }

    .right {
        height: 100%;

        float: right;
        flex-grow: 1;
        transition: width 0.3s;
        overflow-x: auto;

        .top {
            width: 100%;
            height: 200px;
        }
        .bottom {
            width: 100%;
            height: calc(100% - 220px);
        }
    }
}
</style>
<style lang="less">
.container {
    .left {
        .el-submenu__title {
            background-image: none !important;
        }

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 180px;
        }

        .el-menu {
            background-color: transparent !important;
            color: #007bff !important;
            border: none !important;
        }
        .el-menu-item {
            color: #b2e3ff !important;
        }
        .el-menu-item:focus,
        .el-menu-item:hover {
            outline: 0;
            background-color: #074e9a !important;
            color: #0cd9e8 !important;
        }

        .el-menu-item.is-active {
            background-color: #007bff !important;
            color: white !important;
        }
    }
}
</style>
